<template>
  <div class="App">
    <h2>sum : {{ sum }}</h2>
    <h2>人的名字: {{ person.name }}，人的年龄：{{ person.age }}</h2>
    <h2>车的品牌: {{ car.brand }}，车的颜色：{{ car.options.color }}</h2>
    <button @click="add">点击sum+1</button>
    <button @click="changeName">点击修改人的名字</button>
    <button @click="changeAge">点击修改人的年龄</button>
    <button @click="changePerson">点击修改整个人</button>
    <button @click="changeBrand">点击修改车的品牌</button>
    <button @click="changeColor">点击修改车的颜色</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import {shallowReactive,shallowRef} from "vue";
  //数据
  let sum = shallowRef(0)      //响应式
  let person = shallowRef({    //整个对象是响应式的
    name : 'zhangsan',         
    age : 18
  })
  let car = shallowReactive({
    brand : '奔驰',          //响应式
    options :
    {
      color : 'red'         //非响应式
    }
  })
  //方法
  function add(){
    sum.value += 1
  }  
  function changeAge(){
    person.value.age += 1
  }  
  function changeName(){
    person.value.name = 'lisi'
  }  
  function changePerson(){
    person.value = {name : 'lisi',age : 19}
  }  
  function changeBrand(){
    car.brand = '宝马'
  }  
  function changeColor(){
    car.options.color = 'green'
  }  

</script>

<style scoped>

</style>


